<template>
   <div
      :class="[
         {'lg-button': btnType != 'text'},
         {round : round && btnType != 'text'},
         {[btnType]: btnType},
         {[btnType + '--plain']: plain && btnType != 'text'},
         {'plain': plain && btnType == 'default'},
         {disabled},
         {[btnType + '--disabled']: disabled},
         {circle: circle && btnType != 'text'},
         {urlText: url && btnType == 'text'},
      ]"
      v-bind="$attrs"
      @click="onClick"
      :style="`${size ? 'font-size:' + conversion(size, true) + ';' : ''}`"
   >
      <div class="lg-button__inner">
        <i
          v-if="loading || icon"
          :class="['iconfont', {loading: loading}, {'icon-loading': loading}, {[icon]:icon}]"
          :style="`${size ? 'font-size:' + conversion(size, true, true) + ';' : ''}`"
        />
        <span :class="{underline: btnType == 'text' && underline && !disabled}"><slot/></span>
      </div>
   </div>
</template>

<script>
import axios from 'axios'
import { conversion } from '@/libs/index.js'
export default {
  name: 'lgButton',
  props: {
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否圆角
    round: {
      type: Boolean,
      default: false
    },
    // 类型
    type: {
      type: String,
      default: 'default'
    },
    // 文字大小
    size: {
      type: [String, Number],
      default: '14px'
    },
    // 是否朴素按钮
    plain: {
      type: Boolean,
      default: false
    },
    // 是否圆形按钮
    circle: {
      type: Boolean,
      default: false
    },
    // 是否加载中
    loading: {
      type: Boolean,
      default: false
    },
    // 是否使用url跳转
    url: {
      type: String,
      default: ''
    },
    // 是否下划线-必须是text类型才生效
    underline: {
      type: Boolean,
      default: false
    },
    // iconFont - 必须是当前UI库的字体库 - 自定义字段后期拓展
    icon: {
      type: String,
      default: ''
    },
   //  url跳转打开方式
    urlTarget: {
      type: String,
      default: ''
    },
   //  请求blob文件并且导出下载的URL
   action: {
      type: String,
      default: ''
   },
   // blob文件导出配置，可根据axios官方文件配置
   blobParams: {
      type: Object,
      default: () => { return {} }
   }

  },
  data () {
    return {
      btnType: ''
    }
  },
  created () {
    let typeArr = ['primary', 'success', 'warning', 'danger', 'info', 'text']
    this.btnType = typeArr.includes(this.type) ? this.type : 'default'
  },
  methods: {
    onClick () {
      if (this.disabled) return false
      if (this.action) {
         this.blobRequests()
         return false
      }
      if (this.url) {
         if (this.urlTarget == 'open') {
             window.open(this.url)
         } else {
            location.href = this.url
         }
      } else {
        this.$emit('click', true)
      }
      // 缺失submit之类原生功能，等遇到相关需求再补
    },
    conversion,
    //  导出，下载文件流方法，通过$refs访问实例方式导出,res必须为responseType: 'blob'类型文件流
    blobFile (fileName,res = {},suffix = 'xlx') {
      if (typeof res != 'object' && !Object.keys(res).length){
         this.$message.warning('导出的文件流必须是responseType: blob返回的源数据')
         return false
      }
      if (typeof fileName != 'string' || !fileName){
         let time = new Date()
         fileName = `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}_${time.getHours() > 9 ? time.getHours(): '0' + time.getHours()}:${time.getMinutes() > 9 ? time.getMinutes(): '0' + time.getMinutes()}:${time.getSeconds() > 9 ? time.getSeconds(): '0' + time.getSeconds()}`
      }
      let blob = new Blob([res.data]) //指定格式为vnd.ms-excel
      let downloadElement = document.createElement('a')
      let href = window.URL.createObjectURL(blob) //创建下载的链接
      downloadElement.href = href
      downloadElement.download = `${fileName}.${suffix}` //下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放掉blob对象
    },
    blobRequests () {
      if (typeof this.action != 'string' || !this.action){
         this.$message.warning('请求的action链接不能为空。')
         return false
      }
      let fileName = ''
      if (typeof this.blobParams.fileName != 'string' || !this.blobParams.fileName){
         let time = new Date()
         fileName = `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}_${time.getHours() > 9 ? time.getHours(): '0' + time.getHours()}:${time.getMinutes() > 9 ? time.getMinutes(): '0' + time.getMinutes()}:${time.getSeconds() > 9 ? time.getSeconds(): '0' + time.getSeconds()}`
      }
      let requestParams = {}
      for(key in this.blobParams) {
         requestParams[key] = this.blobParams[key]
      }
      requestParams = {
         ...requestParams,
         method: this.blobParams.method || 'post',
         url: this.action,
         data: ['POST', 'post', 'PUT', 'put'].includes(this.blobParams.method) ? this.blobParams.data : {},
         params: ['POST', 'post', 'PUT', 'put'].includes(this.blobParams.method) ? {} : this.blobParams.params || this.blobParams.data,
         responseType: 'blob'
      }
      axios(requestParams)
      .then(res => {
         var blob = new Blob([res.data]) //指定格式为vnd.ms-excel
         var downloadElement = document.createElement('a')
         var href = window.URL.createObjectURL(blob) //创建下载的链接
         downloadElement.href = href
         downloadElement.download = `${this.blobParams.fileName || fileName}.${this.blobParams.suffix || 'xlx'}` //下载后文件名
         document.body.appendChild(downloadElement)
         downloadElement.click() //点击下载
         document.body.removeChild(downloadElement) //下载完成移除元素
         window.URL.revokeObjectURL(href) //释放掉blob对象
      })
    }
  }
}
</script>

<style lang="less" scoped>
.lg-button{
   cursor: pointer;
   border: 1px solid #dcdfe6;
   padding: 10px 15px;
   display: inline-block;
   width: auto;
   border-radius: 4px;
   position: relative;
   z-index: 1;
   text-align: center;
   // line-height: 1;
   &:hover{
      color: #409eff;
      background: #ecf5ff;
      border: 1px solid #c6e2ff;
      position: relative;
      z-index: 2;
   }
   & ~ .lg-button{
      margin-left: 15px
   }
}
.lg-button__inner{
  display:flex;
  align-items: center;
  user-select: none;
  i{
     margin-right: 5px
  }
}
.plain{
   &:hover{
      color: #409eff;
      background: rgba(0,0,0,0);
      border: 1px solid #409eff;
   }
}
.circle{
   padding: 0;
   display: inline-block;
   padding: 11px 14px;
   border-radius: 50%;
   &:hover{
      color: #409eff;
      background: #ecf5ff;
      border: 1px solid rgba(64, 158, 255, .5);
   }
}
.disabled{
  cursor: no-drop;
  color: #cbc4cf;
}
.round{
   border-radius: 20px;
}
.default--disabled{
   &:hover{
      color: #c3c7d5;
      background: rgba(0,0,0,0);
      border: 1px solid #dcdfe6;
   }
}
.primary{
   color: #fff;
   background: rgba(64, 158, 255, 1);
   border: 1px solid rgba(64, 158, 255, 1);
   &:hover{
      color: #fff;
      background: rgba(64, 158, 255, .7);
      border: 1px solid rgba(64, 158, 255, .5) !important;
   }
}

.primary--plain{
   color: rgba(64, 158, 255, 1);
   background: rgba(64, 158, 255, .1);
   border: 1px solid rgba(64, 158, 255, .4);
   &:hover{
      color: #fff;
      background: rgba(64, 158, 255, 1);
      border: 1px solid rgba(64, 158, 255, 1) !important;
   }
}
.primary--disabled{
   color: #fff;
   background: rgba(64, 158, 255, .7);
   border: 1px solid rgba(64, 158, 255, .5) !important;
   &:hover{
      color: #fff;
      background: rgba(64, 158, 255, .7);
      border: 1px solid rgba(64, 158, 255, .5) !important;
   }
}

.success{
   color: #fff;
   background: rgba(103, 194, 58, 1);
   border: 1px solid rgba(103, 194, 58, 1);
   &:hover{
      color: #fff;
      background: rgba(103, 194, 58, .7);
      border: 1px solid rgba(103, 194, 58, .5) !important;
   }
}
.success--plain{
   color: rgba(103, 194, 58, 1);
   background: rgba(103, 194, 58, .1);
   border: 1px solid rgba(103, 194, 58, .4);
   &:hover{
      color: #fff;
      background: rgba(103, 194, 58, 1);
      border: 1px solid rgba(103, 194, 58, 1) !important;
   }
}
.success--disabled{
   color: #fff;
   background: rgba(103, 194, 58, .7);
   border: 1px solid rgba(103, 194, 58, .5) !important;
   &:hover{
      color: #fff;
      background: rgba(103, 194, 58, .7);
      border: 1px solid rgba(103, 194, 58, .5) !important;
   }
}
.info{
   color: #fff;
   background: rgba(144, 147, 153, 1);
   border: 1px solid rgba(144, 147, 153, 1);
   &:hover{
      color: #fff;
      background: rgba(144, 147, 153, .7);
      border: 1px solid rgba(144, 147, 153, .5) !important;
   }
}
.info--plain{
   color: rgba(144, 147, 153, 1);
   background: rgba(144, 147, 153, .1);
   border: 1px solid rgba(144, 147, 153, .4);
   &:hover{
      color: #fff;
      background: rgba(144, 147, 153, 1);
      border: 1px solid rgba(144, 147, 153, 1) !important;
   }
}
.info--disabled{
   color: #fff;
   background: rgba(144, 147, 153, .7);
   border: 1px solid rgba(144, 147, 153, .5) !important;
   &:hover{
      color: #fff;
      background: rgba(144, 147, 153, .7);
      border: 1px solid rgba(144, 147, 153, .5) !important;
   }
}
.warning{
   color: #fff;
   background: rgba(230, 162, 60, 1);
   border: 1px solid rgba(230, 162, 60, 1);
   &:hover{
      color: #fff;
      background: rgba(230, 162, 60, .7);
      border: 1px solid rgba(230, 162, 60, .5) !important;
   }
}
.warning--plain{
   color: rgba(230, 162, 60, 1);
   background: rgba(230, 162, 60, .1);
   border: 1px solid rgba(230, 162, 60, .4);
   &:hover{
      color: #fff;
      background: rgba(230, 162, 60, 1);
      border: 1px solid rgba(230, 162, 60, 1) !important;
   }
}
.warning--disabled{
   color: #fff;
   background: rgba(230, 162, 60, .7);
   border: 1px solid rgba(230, 162, 60, .5) !important;
   &:hover{
      color: #fff;
      background: rgba(230, 162, 60, .7);
      border: 1px solid rgba(230, 162, 60, .5) !important;
   }
}
.danger{
   color: #fff;
   background: rgba(245, 108, 108, 1);
   border: 1px solid rgba(245, 108, 108, 1);
   &:hover{
      color: #fff;
      background: rgba(245, 108, 108, .7);
      border: 1px solid rgba(245, 108, 108, .5) !important;
   }
}
.danger--plain{
   color: rgba(245, 108, 108, 1);
   background: rgba(245, 108, 108, .1);
   border: 1px solid rgba(245, 108, 108, .4);
   &:hover{
      color: #fff;
      background: rgba(245, 108, 108, 1);
      border: 1px solid rgba(245, 108, 108, 1) !important;
   }
}
.danger--disabled{
   color: #fff;
   background: rgba(245, 108, 108, .7);
   border: 1px solid rgba(245, 108, 108, .5) !important;
   &:hover{
      color: #fff;
      background: rgba(245, 108, 108, .7);
      border: 1px solid rgba(245, 108, 108, .5) !important;
   }
}
.text{
   cursor: pointer;
   display: inline-block;
   width: auto;
   color: rgba(64, 158, 255, 1);
   &:hover{
     color: rgba(64, 158, 255, .7);
   }
}
.text--disabled{
   cursor: no-drop;
   color: #cbc4cf;
   background: rgba(0, 0, 0, 0);
   &:hover{
     color: #cbc4cf;
   }
}
.urlText{
  color: #333;
   &:hover{
     color: rgba(64, 158, 255, .7);
   }
  .underline{
    &:hover{
      border-bottom: 1px solid rgba(64, 158, 255, .7)
    }
  }
}
@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(350deg);
  }
}
.loading{
   animation: myfirst 2s linear infinite;
   display:inline-block;
}
</style>
